<template>
	<view class="content">
		<view class="form">
			<u--form :rules="rules" :model="form" ref="login" labelPosition="top" labelWidth="80" :labelStyle="{color: '#ffffff', fontSize: '25rpx', paddingBottom: '10rpx'}">
				<u-form-item label="手机号" prop="username">
					<u--input v-model="form.username" class="input" color="#ffffff" maxlength="12"></u--input>
				</u-form-item>
				<!-- <u-form-item label="密码" prop="password">
					<u--input v-model="form.password" type="password" class="input" color="#ffffff" maxlength="36"></u--input>
				</u-form-item> -->
				<u-form-item label="验证码" prop="code">
					<u-input v-model="form.code" class="input" color="#ffffff" maxlength="6">
						<template slot="suffix">
							<u-code
								ref="uCode"
								@change="codeChange"
								seconds="120"
								changeText="X秒重新获"
							></u-code>
							<u-button
								@tap="getCode"
								:text="tips"
								type="success"
								size="mini"
								class="light-btn"
							></u-button>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item >
					<view class="toRegister" @click="navTo('/pages/register/register')">没有账号？去注册</view>
				</u-form-item>
				<u-form-item>
					<button @click="onLogin" class="light-btn btn" :class="{inactive: !selected}">立即登录</button>
				</u-form-item>
				<u-form-item>
					<view class="intro">
						<u-checkbox-group>
							<u-checkbox @change="onChange" :checked="selected" activeColor="#2979ff" size="14" iconSize="10" shape="circle"></u-checkbox>
						</u-checkbox-group>
						<view>
							<text>勾选代表你已阅读并同意</text>
							<text class="light">《服务协议》</text>
							<text>和</text>
							<text class="light">《隐私条款》</text>
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				tips: '',
				selected: true,
				rules: {
					username: [
						{
							type: 'string',
							required: true,
							message: '请输入手机号',
							trigger: ['blur']
						}
					],
					code: [
						{
							type: 'string',
							required: true,
							message: '请输入验证码',
							trigger: ['blur']
						},
					]
					// password:[
					// 	{
					// 		type: 'string',
					// 		required: true,
					// 		message: '请输入密码',
					// 		trigger: ['blur']
					// 	},
					// ]
				},
				form: {
					username: '',
					password: '',
					code: null,
					authCode: ''
				},
				smsToken: '',
				smsForm: {
					type: 'common',
					number: ''
				}
			}
		},
		methods: {
			...mapActions('user', ['login']),
			...mapActions('common', ['sendSms']),
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let _this = this
				if(!this.form.username){
					uni.$u.toast('请输入手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
				  this.smsForm.number = this.form.username;
				  this.sendSms(this.smsForm).then(res => {
					  // 这里此提示会被this.start()方法中的提示覆盖
					  // uni.$u.toast('验证码已发送');
					  // 通知验证码组件内部开始倒计时
					  _this.smsToken = res.data
					  _this.$refs.uCode.start();
				  })
				} else {
				}
			},
			onChange(v){
				this.selected = v
			},
			onLogin(){
				if(!this.selected) return;
				this.$refs.login.validate().then(res => {
					this.form.authCode = this.smsToken + ':' + this.form.code
					this.login(this.form).then(res => {
						uni.$u.toast("登录成功")
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, 1500)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.form{
			padding: 20rpx 20rpx;
			.input{
				background-color: #232639 !important;
				border: 1rpx solid #666666 !important;
				color: #ffffff;
			}
			.intro{
				color: #ffffff;
				font-size: 25rpx;
				display: flex;
				.light{
					color: #2979ff;
				}
			}
		}
		.btn{
			margin-top: 20rpx;
			width: 100%;
		}
		.toRegister{
			color: #bf8fef;
			margin-left: auto;
		}
		.inactive{
			background: #999999 !important;
		}
	}
</style>
